<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
    	<meta charset="UTF-8">
  		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<!--bootstrap-->
		<link rel="stylesheet" href="plugins/bootstrap-3.3.7-dist/css/bootstrap.min.css" />
		<!--normalize-->
		<link rel="stylesheet" href="plugins/Normalize/normalize.min.css" />
		<!--fullPage-->
		<link rel="stylesheet" href="plugins/fullPages.js/jquery.fullpage.min.css" />
		<!--animate-->
		<link rel="stylesheet" href="plugins/animate/animate.css" />
		<!--自定义CSS-->
		<link rel="stylesheet" href="css/oj.index.css" />
		<!--jQuery-->
		<script type="text/javascript" src="plugins/jQuery/jquery-3.2.1.min.js" ></script>
        <title>QOJ - 主页</title>
    </head>
    <body>
    	<!--顶栏-->
    	<nav class="navbar navbar-default navbar-fixed-top">
    		<div class="container-fluid">
    			<div class="navbar-header">
    				<button type="button" class="navbar-toggle collapse" data-toggle="collapse" data-target="#navbar-menu">
    					<span class="icon-bar"></span>
    					<span class="icon-bar"></span>
    					<span class="icon-bar"></span>
    				</button>
    				<a href="index.jsp" class="navbar-brand">Q · O J</a>
    			</div>
    			
    			<div class="collapse navbar-collapse">
    				<ul class="nav navbar-nav navbar-left" id="menu">
    					<li data-menuanchor="home" class="active"><a href="#home">首页</a></li>
    					<li data-menuanchor="student"><a href="#student">学生</a></li>
    					<li data-menuanchor="teacher"><a href="#teacher">教师</a></li>
    				</ul>
    				<ul class="nav navbar-nav navbar-right">
    					<li id="navbar-signin"><a href="#home">登陆</a></li>
    					<li id="navbar-signup"><a href="#home">注册</a></li>
    				</ul>
    			</div>
    		</div>
    	</nav>
    	
    	<div id="page">
    		<div class="section active" id="page-home">
    			<div class="tab-content">
	    			<div class="tab-pane active fade in" id="tab-home">
    					<div class="container" id="home-content">
    						<div id="page-home-logo">
		    					<h1>Q·OJ</h1>
    							<h4>一切只为你</h4>
    						</div>
    						
		    				<ul class="nav nav-tabs">
    							<li class="active" id="nav-tab-signin"><a href="#tab-signin" data-toggle="tab">登陆</a></li>
    							<li id="nav-tab-signup"><a href="#tab-signup" data-toggle="tab">注册</a></li>
    						</ul>
    						
    						<div class="tab-content">
    							<div class="tab-pane active" id="tab-signin">
    								<div id="alert-signin"></div>
    								<ul class="list-group">
    									<li class="list-group-item">
    										<div class="btn-group" id="sign-type" data-toggle="buttons">
    											<label class="btn btn-default active" id="sign-student">学生<input type="radio"/></label>
    											<label class="btn btn-default" id="sign-teacher">教师<input type="radio"/></label>
    											<!--暂时-->
    											<label class="btn btn-default" id="sign-admin">管理员<input type="radio"/></label>
    										</div>
    									</li>
  										<li class="list-group-item">
  											<input type="text" class="form-control" id="signin-user" placeholder="学号 或 邮箱" autofocus>
  										</li>
  										<li class="list-group-item">
  											<input type="password" class="form-control" id="signin-password" placeholder="密码">
  										</li>
									</ul>
									<a href="#tab-send" id="update-password" data-toggle="tab">忘记密码</a>
				      				<button type="button" class="btn btn-primary" id="signin-enter">登陆</button>
    							</div>
    							<div class="tab-pane" id="tab-signup">
    								<div id="alert-signup"></div>
    								<ul class="list-group">
    									<li class="list-group-item">
  											<input type="text" class="form-control" id="signup-ID" placeholder="学号 ( 暂时仅对学生开放注册 )">
  										</li>
  										<li class="list-group-item">
  											<input type="text" class="form-control" id="signup-email" placeholder="邮箱 ( 必填 )">
  										</li>
  										<li class="list-group-item">
  											<input type="password" class="form-control" id="signup-password" placeholder="密码 ( 不少于6位 )">
  										</li>
									</ul>
		      						<button type="button" class="btn btn-primary" id="signup-enter">注册QOJ</button>
    							</div>
    						</div>
    					</div>
    				</div>
    			
    				<div class="tab-pane fade" id="tab-send">
    					<div class="container reset-content">
    						<a href="#tab-home" id="send-back" data-toggle="tab"><span class="glyphicon glyphicon-chevron-left"></span></a>
    						<h1>找回密码</h1>
    						<h4>验证码将会发往你的注册邮箱</h4>
    						<div id="alert-send"></div>
    						<ul class="list-group">
  								<li class="list-group-item">
  									<input type="text" id="send-user" class="form-control" placeholder="学号 或 工号">
  								</li>
  								<li class="list-group-item">
  									<input type="text" id="send-email" class="form-control" placeholder="注册邮箱">
  								</li>
  								<button type="button" class="btn btn-primary" id="send-enter">发送验证码</button>
							</ul>
    					</div>
    				</div>
    				
    				<div class="tab-pane fade" id="tab-reset">
    					<div class="container reset-content">
    						<a href="#tab-send" id="reset-back" data-toggle="tab"><span class="glyphicon glyphicon-chevron-left"></span></a>
    						<h1>重设密码</h1>
    						<h4>验证码已发往你的注册邮箱</h4>
    						<div id="alert-reset"></div>
    						<ul class="list-group">
  								<li class="list-group-item">
  									<input type="password" id="reset-password" class="form-control" placeholder="新密码 ( 不少于6位 )">
  								</li>
  								<li class="list-group-item">
  									<input type="password" id="reset-check" class="form-control" placeholder="再次输入">
  								</li>
  								<li class="list-group-item">
  									<input type="text" id="reset-code" class="form-control" placeholder="收到的验证码">
  								</li>
  								<button type="button" class="btn btn-primary" id="reset-enter">重设密码</button>
							</ul>
    					</div>
    				</div>
    			</div>
    		</div>
    		<div class="section" id="page-student">
    			<div class="container">
    				<h1>学生</h1>
    			</div>
    		</div>
    		<div class="section" id="page-teacher">
    			<div class="container">
    				<h1>教师</h1>
    			</div>
    		</div>
    	</div>
    	
    	<!--bootstrap-->
    	<script type="text/javascript" src="plugins/bootstrap-3.3.7-dist/js/bootstrap.min.js" ></script>
    	<!--fullPage-->
    	<script type="text/javascript" src="plugins/fullPages.js/jquery.fullpage.min.js" ></script>
    	<!--自定义JS-->
    	<script type="text/javascript" src="js/oj.main.js" ></script>
    	<script type="text/javascript" src="js/oj.index.js" ></script>
 	</body>
</html>